<template>
	<view class="e-toolbar" @touchmove.stop.prevent="noop" v-if="show">
		<view class="e-toolbar__cancel__wrapper" hover-class="e-hover-class">
			<text
				class="e-toolbar__wrapper__cancel"
				@tap="cancel"
				:style="{
					color: cancelColor
				}"
			>
				{{ cancelText }}
			</text>
		</view>
		<text class="e-toolbar__title e-line-1" v-if="title">{{ title }}</text>
		<view class="e-toolbar__confirm__wrapper" hover-class="e-hover-class">
			<text
				class="e-toolbar__wrapper__confirm"
				@tap="confirm"
				:style="{
					color: confirmColor
				}"
			>
				{{ confirmText }}
			</text>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import mpMixin from '../../libs/mixin/mpMixin';
export default defineComponent({
	name: 'toolbar',
	mixins: [mpMixin]
});
</script>
<script lang="ts" setup>
import { toolbarProps, toolbarEmit } from './props';
import { noop } from '../../libs/utils/_utils';

const props = defineProps(toolbarProps);
const emit = defineEmits(toolbarEmit);
// 点击取消按钮
const cancel = () => {
	emit('cancel');
};
// 点击确定按钮
const confirm = () => {
	emit('confirm');
};
</script>

<style lang="scss" scoped>
@import '../../libs/theme/toolbar.scss';
</style>
